/* ----------------------------------------------------------------

	header.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Header
-----------------------------------------------------------------*/

#header {
  --#{$prefix}header-height: 80px;
  --#{$prefix}header-height-shrink: 80px;
  --#{$prefix}sticky-header-height: 80px;
  --#{$prefix}header-bg: #fff;
  --#{$prefix}header-sticky-bg: #fff;
  --#{$prefix}hamburger-color: #{$gray-500};
  --#{$prefix}primary-menu-color: #{$gray-600};
  --#{$prefix}primary-menu-hover-color: #bd9f68;
  --#{$prefix}primary-menu-active-color: #bd9f68;
  --#{$prefix}primary-menu-font-weight: 700;
  --#{$prefix}primary-menu-font-size: 16px;
  --#{$prefix}primary-menu-tt: uppercase;
  --#{$prefix}primary-menu-ls: 1px;
  --#{$prefix}primary-menu-submenu-display-speed: 0.1s;
  --#{$prefix}primary-menu-submenu-width: 120px;
  --#{$prefix}primary-menu-submenu-bg: rgba(255, 255, 255, 0.98);
  --#{$prefix}primary-menu-submenu-border: 1px solid rgba(255, 255, 255, 0.2);
  --#{$prefix}primary-menu-submenu-top-border: 3px solid
    var(--#{$prefix}primary-menu-hover-color);
  --#{$prefix}header-border-color: 1px solid rgba(255, 255, 255, 0.2);
  --#{$prefix}primary-menu-submenu-font-size: 14px;
  --#{$prefix}primary-menu-submenu-padding-y: 8px;
  --#{$prefix}primary-menu-submenu-padding-x: 8px;
  --#{$prefix}primary-menu-submenu-hover-padding-offset: 4px;
  --#{$prefix}primary-menu-hover-text-decoration: none;

  position: relative;
  &-wrap {
    position: fixed;
    height: auto;
    z-index: 299;
    width: 100%;
    background-color: var(--#{$prefix}header-bg);
    @include transition(height 0.2s ease 0s, background-color 0.3s ease 0s);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  &.transparent-header {
    --#{$prefix}header-bg: linear-gradient(
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0)
    );
    --#{$prefix}primary-menu-color: #fff;
    --#{$prefix}hamburger-color: #fff !important;
    &:not(.sticky-header-shrink) #header-wrap {
      background: var(--#{$prefix}header-bg);
      #logo img {
        filter: grayscale(100%) brightness(100);
      }
    }
  }
}

.is-expanded-menu {
  #top-bar + #header:not(.sticky-header),
  #slider + #header:not(.sticky-header),
  div +,
  .no-sticky,
  #header[data-sticky-offset]:not([data-sticky-offset="full"]):not(
      .sticky-header
    ) {
    #header-wrap {
      position: absolute;
    }
  }
}

body.is-expanded-menu:not(.stretched) #header:not(.sticky-header) {
  #header-wrap {
    position: absolute;
  }
}

body:not(.is-expanded-menu)
  #header:not([data-mobile-sticky="true"])
  #header-wrap {
  position: relative;
}

body:not(.is-expanded-menu)
  #header:not([data-mobile-sticky="true"])
  .header-wrap-clone {
  display: none;
}

.header-wrap-clone {
  height: var(--#{$prefix}header-height);
}

.header-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .is-expanded-menu & {
    position: initial;
  }
}

.is-expanded-menu {
  #header.sticky-header-shrink {
    --#{$prefix}sticky-header-height: var(--#{$prefix}header-height-shrink);
  }

  #header {
    + .include-header {
      margin-top: calc(-1 * var(--#{$prefix}header-height));
      display: inline-block;
      vertical-align: bottom;
      width: 100%;
    }
    &.transparent-header {
      --#{$prefix}header-bg: linear-gradient(
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0)
      );
      &:not(.sticky-header) #header-wrap {
        z-index: 299;
        background: var(--#{$prefix}header-bg);
      }
    }
    &.sticky-header {
      // --#{$prefix}header-bg: #fff;
      // --#{$prefix}primary-menu-color: #111827;
      --#{$prefix}header-height: var(--#{$prefix}sticky-header-height);
      #header-wrap {
        z-index: 299;
        // background: var(--#{$prefix}header-bg);
      }
    }
    &.sticky-header-shrink {
      --#{$prefix}header-bg: #fff;
      --#{$prefix}primary-menu-color: #{$gray-600};
      --#{$prefix}header-height: var(--#{$prefix}sticky-header-height);
      #header-wrap {
        z-index: 299;
        background: var(--#{$prefix}header-bg);
        box-shadow: var(--#{$prefix}box-shadow);
      }
    }
  }

  &.stretched .full-header #header-wrap > .container {
    width: 100%;
    max-width: none;
    padding: 0 30px;
  }

  /* ----------------------------------------------------------------
		Sticky Header
	-----------------------------------------------------------------*/

  .sub-menu-container {
    @include transition(top 0.4s ease);
  }

  .sticky-header {
    #header-wrap {
      position: fixed;
      top: 0;
      left: 0;
      background-color: var(--#{$prefix}header-sticky-bg);
    }
  }

  .sticky-header-shrink {
    .sub-title .menu-container > .menu-item > .menu-link {
      --#{$prefix}primary-menu-padding-y: 18px;
    }
  }
}

body:not(.is-expanded-menu) {
  // [data-mobile-sticky="true"] .menu-container {
  //   max-height: 60vh;
  //   margin: 0 0 1rem;
  //   overflow-x: hidden;
  //   overflow-y: scroll;
  // }
  #header[data-mobile-sticky="true"] {
    --#{$prefix}header-height: 60px;
  }

  .sticky-header {
    #header-wrap {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 299;
      background-color: var(--#{$prefix}header-sticky-bg);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .header-wrap-clone {
      display: block;
    }
  }

  &:not(.primary-menu-open) {
    #header[data-mobile-sticky="true"] {
      --#{$prefix}header-height: 60px;
      --#{$prefix}hamburger-color: #{$gray-500} !important;
      #header-wrap {
        background: #fff;
        box-shadow: var(--#{$prefix}box-shadow);
        #logo img {
          filter: none;
        }
      }
    }
    .dark.transparent-header-responsive,
    .transparent-header-responsive {
      background-color: transparent;
      border: none;
    }
  }
}

/* ----------------------------------------------------------------
	Logo
-----------------------------------------------------------------*/

#logo {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: auto;
  max-height: 100%;

  a {
    width: 100%;
    [class^="logo-"] {
      display: none;
    }

    .logo-default {
      display: flex;
    }
  }

  img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    @include transition(
      height 0.4s ease,
      padding 0.4s ease,
      margin 0.4s ease,
      opacity 0.3s ease
    );

    #header-wrap & {
      // height: calc(var(--#{$prefix}header-height) * 0.8);
      height: 64px;
      padding: 7px 0;
      // margin-top: calc(var(--#{$prefix}header-height) * 0.1);
      // margin-bottom: calc(var(--#{$prefix}header-height) * 0.1);
    }
  }

  .is-expanded-menu .full-header & {
    padding-right: 30px;
  }

  @at-root .is-expanded-menu
      #header.sticky-header-shrink
      #header-wrap
      #logo
      img {
    // height: var(--#{$prefix}sticky-header-height);
    margin: 0 auto;
  }
}

/* ----------------------------------------------------------------
	Primary Menu
-----------------------------------------------------------------*/

.primary-menu {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
  .is-expanded-menu & {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    // flex-grow: 0;
  }
}

.primary-menu-trigger {
  --#{$prefix}menu-trigger-gap: 0.75rem;
  display: flex;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  padding: var(--#{$prefix}menu-trigger-gap);
  @include transition(opacity 0.3s ease);
  .is-expanded-menu & {
    display: none;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
}

.primary-menu-trigger {
  body:not(.top-search-open) .top-search-parent & {
    opacity: 1;
    @include transition(opacity 0.2s 0.2s ease, top 0.4s ease);
  }

  .top-search-open .top-search-parent & {
    opacity: 0;
  }

  .primary-menu-trigger-text {
    margin-left: 0.25rem;
  }
}

.#{$prefix}hamburger {
  --#{$prefix}hamburger-size: 1rem;
  --#{$prefix}hamburger-width: 2px;
  --#{$prefix}hamburger-offset: calc(
    -1 * calc(calc(
            var(--#{$prefix}hamburger-size) -
              calc(var(--#{$prefix}hamburger-width) * 2)
          ) * 0.5)
  );

  display: block;
  position: relative;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible;

  .#{$prefix}hamburger-box {
    width: var(--#{$prefix}hamburger-size);
    height: var(--#{$prefix}hamburger-size);
    display: block;
    position: relative;
  }

  .#{$prefix}hamburger-inner {
    display: block;
    top: 50%;
    margin-top: calc(-1 * calc(var(--#{$prefix}hamburger-width) * 0.5));
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

    &,
    &::before,
    &::after {
      width: var(--#{$prefix}hamburger-size);
      height: var(--#{$prefix}hamburger-width);
      background-color: var(--#{$prefix}hamburger-color); //$gray-900;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease;
    }

    &::before,
    &::after {
      content: "";
      display: block;
    }

    &::before {
      top: var(--#{$prefix}hamburger-offset);
      transition: top 0.075s 0.12s ease, opacity 0.075s ease;
    }

    &::after {
      bottom: var(--#{$prefix}hamburger-offset);
      transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    @at-root .primary-menu-trigger-active & {
      transform: rotate(45deg);
      transition-delay: 0.12s;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

      &::before {
        top: 0;
        opacity: 0;
        transition: top 0.075s ease, opacity 0.075s 0.12s ease;
      }

      &::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.075s ease,
          transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }
  }
}

.menu-container {
  display: none;
  list-style: none;
  margin: 0;
  width: 100%;
}

.menu-item {
  position: relative;

  &:not(:first-child) {
    border-top: var(--#{$prefix}primary-menu-submenu-border);
    .is-expanded-menu & {
      border-top: 0;
    }
  }

  &:hover {
    > .menu-link {
      a {
        color: var(--#{$prefix}primary-menu-hover-color) !important;
      }
    }
  }
  &.current {
    > .menu-link {
      a {
        color: var(--#{$prefix}primary-menu-active-color) !important;
      }
    }
  }
  .sub-menu-trigger {
    display: block;
    position: absolute;
    cursor: pointer;
    outline: none;
    border: none;
    background: none;
    padding: 0;
    top: 9px;
    right: 0;
    width: 32px;
    height: 32px;
    font-size: 12px;
    line-height: 32px;
    text-align: center;
    color: var(--#{$prefix}primary-menu-color);
    @include transition(transform 0.3s ease);
  }
}

.is-expanded-menu .menu-item.menu-item-important > .menu-link > div::after {
  content: "";
  display: inline-block;
  position: relative;
  top: -0.25rem;
  left: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--#{$prefix}danger);
}

.menu-link {
  --#{$prefix}primary-menu-padding-y: 14px;
  --#{$prefix}primary-menu-padding-x: 4px;
  a {
    display: block;
    white-space: nowrap;
    line-height: 22px;
    padding: var(--#{$prefix}primary-menu-padding-y)
      var(--#{$prefix}primary-menu-padding-x);
    color: var(--#{$prefix}primary-menu-color);
    font-weight: var(--#{$prefix}primary-menu-font-weight);
    font-size: var(--#{$prefix}primary-menu-font-size);
    font-family: var(--#{$prefix}primary-menu-font);
    text-transform: var(--#{$prefix}primary-menu-tt);
    letter-spacing: var(--#{$prefix}primary-menu-ls);
  }

  .is-expanded-menu & {
    --#{$prefix}primary-menu-padding-y: calc(
      calc(var(--#{$prefix}header-height) - 22px) * 0.5
    );
    --#{$prefix}primary-menu-padding-x: 0;
    @include transition(margin 0.4s ease, padding 0.4s ease);
  }
  span {
    display: var(--#{$prefix}primary-menu-submenu-subtitle-display);
  }

  a {
    text-decoration: none;
  }

  i {
    position: relative;
    font-size: var(--#{$prefix}primary-menu-icon-size);
    width: var(--#{$prefix}primary-menu-icon-size);
    text-align: center;
    margin-right: var(--#{$prefix}primary-menu-icon-gap);
    vertical-align: top;
  }
  div > i.sub-menu-indicator {
    display: none;
  }
}

.is-expanded-menu {
  .menu-container > .menu-item > .menu-link {
    a {
      color: var(--#{$prefix}primary-menu-color);
    }
  }
  .menu-container > .menu-item:not(.sub-menu) > .menu-link {
    &::before {
      content: "";
      position: absolute;
      bottom: calc(calc(var(--#{$prefix}header-height) - 22px) * 0.25);
      left: 0;
      width: 0;
      border-bottom: 3px solid var(--#{$prefix}primary-menu-hover-color);
      transform: scaleX(0);
      transition: all 0.2s ease-out 0s;
    }
  }
  .menu-container > .menu-item:not(.sub-menu):hover > .menu-link {
    a {
      color: var(--#{$prefix}primary-menu-hover-color);
    }
    &::before {
      width: 100%;
      transform: scaleX(1);
      transition: all 0.2s ease-out 0s;
    }
  }
  .menu-container > .menu-item > .sub-menu-container > .menu-item > .menu-link {
    text-align: center;
  }

  .menu-container > .menu-item-divider {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    height: 2.5rem;
    border-left: var(--#{$prefix}primary-menu-submenu-border);
  }

  .sub-menu-container > .menu-item-divider {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
    border-top: var(--#{$prefix}primary-menu-submenu-border);
  }
}

.sub-menu-container {
  position: relative;
  padding-left: 15px;
  border-top: 1px solid var(--#{$prefix}header-border-color);
  list-style: none;
  margin-bottom: 0;
  .is-expanded-menu & {
    position: absolute;
    visibility: hidden;
    background-color: var(--#{$prefix}primary-menu-submenu-bg);
    box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
    border: var(--#{$prefix}primary-menu-submenu-border);
    border-top: var(--#{$prefix}primary-menu-submenu-top-border);
    z-index: 399;
    top: 100%;
    left: 0;
    padding: 0;
  }
}

.is-expanded-menu {
  #header:not(.sticky-header) {
    .menu-container > .menu-item > .sub-menu-container {
      top: calc(
        100% - calc((var(--#{$prefix}header-height) - 22px) * 0.25) - 3px
      );
    }
  }
  .menu-container > .menu-item > .sub-menu-container {
    left: 50% !important;
    transform: translateX(-50%);
  }
  .menu-container > .menu-item .sub-menu-container {
    min-width: var(--#{$prefix}primary-menu-submenu-width);
  }
}

.sub-menu-container {
  .menu-item {
    &:not(:first-child) {
      border-top: var(--#{$prefix}primary-menu-submenu-border);
    }
    > .menu-link {
      position: relative;

      a {
        position: relative;
        color: $gray-700;
        padding: 8px 4px;
        font-size: var(--#{$prefix}primary-menu-submenu-font-size);
        font-weight: var(--#{$prefix}primary-menu-submenu-font-weight);

        letter-spacing: var(--#{$prefix}primary-menu-submenu-spacing);
        font-family: var(--#{$prefix}primary-menu-submenu-font);
      }
    }
    &:hover > .menu-link {
      --#{$prefix}primary-menu-submenu-font-weight: var(
        --#{$prefix}primary-menu-submenu-hover-font-weight
      );
      a {
        color: var(--#{$prefix}primary-menu-hover-color);
      }
    }
    .sub-menu-trigger {
      top: 6px;
    }
  }
  .sub-menu-trigger {
    font-size: 10px;
  }
}

.is-expanded-menu {
  .primary-menu:not(.on-click) {
    .menu-item:hover {
      > .sub-menu-container {
        opacity: 1;
        visibility: visible;
        margin-top: 0;
        z-index: 399;
        pointer-events: auto;
        // @include transition(
        //   opacity var(--#{$prefix}primary-menu-submenu-display-speed) ease,
        //   margin var(--#{$prefix}primary-menu-submenu-display-speed) ease
        // );
      }
    }

    .menu-item:not(.menu-item-hover) {
      > .sub-menu-container {
        > * {
          display: none;
        }
      }
    }
    .sub-menu-container {
      .menu-item:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .with-arrows
    .menu-container
    > .menu-item
    > .menu-link
    div
    > i.sub-menu-indicator {
    display: inline-block;
  }
}

body:not(.is-expanded-menu) {
  .primary-menu {
    max-width: 100%;
    > .container {
      max-width: none;
      padding: 0;
    }
  }
}

/* Mobile Menu: Overlay
-----------------------------------------------------------------*/
body:not(.is-expanded-menu).primary-menu-open {
  // position: fixed;
  // width: 100vw;
  height: 100vh;
  overflow: hidden;

  #header {
    --#{$prefix}primary-menu-color: #fff;
    --#{$prefix}hamburger-color: #fff !important;
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #0066cc url(/assets/images/nav-bg.png) no-repeat right top;
    z-index: 18;
    transition: all 0.5s ease;
    &-wrap {
      background: #0066cc !important;
      transition: all 0.3s ease;
      #logo img {
        filter: grayscale(100%) brightness(100);
        transition: all 0.3s ease;
      }
    }

    .mobile-menu-overlay {
      .menu-container {
        position: absolute;
        z-index: 99;
        width: 100%;
        height: auto;
        max-height: calc(
          100vh - var(--#{$prefix}header-height) - $topbar-height
        ) !important;
        margin: 0 !important;
        left: 0 !important;
        top: var(--#{$prefix}header-height) !important;
        border: 1px solid rgba(var(--#{$prefix}contrast-rgb), 0.1);
        border-radius: 0.5rem;
        padding: 1rem 1.5rem !important;
        background-color: transparent; //var(--#{$prefix}header-bg);
        overflow-y: auto;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: opacity 0.3s ease;
        .menu-item {
          .menu-link {
            a {
              color: $white;
            }
          }
          .sub-menu-container {
            padding-left: 8px;
            background: rgba(0, 0, 0, 0.15);
            .menu-item {
              font-size: 14px;
              font-weight: 500;
              .menu-link {
                color: $gray-100;
              }
            }
            .menu-item:not(.sub-menu) {
              padding-left: 0;
              // width: calc((100% - 15px) / 3);
              width: auto;
              display: inline-block;
              font-weight: 400;
              border-top: none;
            }
            .sub-menu-container {
              background: transparent;
              .menu-item:not(.sub-menu) {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}

.is-expanded-menu {
  .menu-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    padding-left: 1rem;
    & > .menu-item {
      margin-left: 0.375rem;
    }
  }

  .full-header .primary-menu .menu-container {
    padding-right: 0.5rem;
    margin-right: 0.5rem;
  }

  // .menu-container > .menu-item:not(:first-child) {
  //   margin-left: 2px;
  // }

  .sub-menu-container .sub-menu-container {
    list-style: none;
    top: -2px !important;
    left: 100%;
  }

  .sub-menu-container.menu-pos-invert {
    left: auto;
    right: 0;
  }

  .sub-menu-container .sub-menu-container.menu-pos-invert {
    right: 100%;
  }

  .sub-menu-container .menu-item:not(:first-child) {
    border-top: 0;
  }

  .sub-menu-container .menu-item > .menu-link {
    a {
      padding: var(--#{$prefix}primary-menu-submenu-padding-y)
        var(--#{$prefix}primary-menu-submenu-padding-x);
      font-weight: var(--#{$prefix}primary-menu-submenu-font-weight);
      text-transform: var(--#{$prefix}primary-menu-submenu-tt);
      // @include transition(all 0.2s ease-in-out);
    }
    border: 0;

    span {
      --#{$prefix}primary-menu-submenu-subtitle-display: block;
      color: var(--#{$prefix}primary-menu-submenu-subtitle-color);
      font-size: var(--#{$prefix}primary-menu-submenu-subtitle-font-size);
      font-weight: var(--#{$prefix}primary-menu-submenu-subtitle-font-weight);
      text-transform: var(--#{$prefix}primary-menu-submenu-subtitle-tt);
      line-height: 1.5;

      &.menu-subtitle-icon-offset {
        margin-left: calc(
          var(--#{$prefix}primary-menu-icon-size) +
            var(--#{$prefix}primary-menu-icon-gap)
        );
      }
    }
  }

  .sub-menu-container .menu-item:hover > .menu-link {
    background-color: var(--#{$prefix}primary-menu-submenu-hover-bg);
    --#{$prefix}primary-menu-submenu-font-weight: var(
      --#{$prefix}primary-menu-submenu-hover-font-weight
    );
    a {
      padding-left: calc(
        var(--#{$prefix}primary-menu-submenu-padding-x) +
          var(--#{$prefix}primary-menu-submenu-hover-padding-offset)
      );
      padding-right: calc(
        var(--#{$prefix}primary-menu-submenu-padding-x) -
          var(--#{$prefix}primary-menu-submenu-hover-padding-offset)
      );
    }

    div {
      text-decoration: var(--#{$prefix}primary-menu-hover-text-decoration);
      text-underline-offset: var(
        --#{$prefix}primary-menu-hover-text-decoration-offset
      );
    }
  }

  .sub-menu-container .menu-item:hover > .menu-link,
  .sub-menu-container .menu-item.current > .menu-link {
    a {
      color: var(--#{$prefix}primary-menu-submenu-hover-color);
    }
  }

  .menu-link div > i.sub-menu-indicator {
    top: 0px;
    font-size: 0.75rem;
    margin: 0 0 0 0.1875rem;
    opacity: 0.9;
  }

  .sub-menu-container .menu-link div > i.sub-menu-indicator {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    line-height: 1;
    margin: 0;
    transform: translateY(-50%) rotate(-90deg);
  }

  .menu-item .sub-menu-trigger {
    display: none;
  }
}

@include media-breakpoint-up(xl) {
  .is-expanded-menu {
    .menu-container {
      & > .menu-item {
        margin-left: 1vw;
      }
    }
  }
}
@include media-breakpoint-up(xxl) {
  .is-expanded-menu {
    .menu-container {
      & > .menu-item {
        margin-left: 1.5rem;
      }
    }
  }
}
